<template>
    <div class="nav-box">
  
      <div @click="change(item.val,index)" v-for="(item,index) in data" :key="index" :style="{backgroundColor:(currIndex==index?'#2a2f33':item.bgc)}">
       
        <div>{{item.text}}</div>
       
        <div :style="{color:item.col}">{{item.num}}</div>
  
        <div v-if="currIndex==index"></div>
  
      </div>
  
   </div>
  </template> 
  <script setup>
  import './nav.scss'
  import {ref,onMounted} from 'vue'
  import emitter from"../../untils/evebtBus";
  import db from "../../data/db"

  const data = ref([
    {
      text:'待处理',
      num:'7',
      col:"red",
      val:"pending",
      bgc:'#1f232c'
    },
    {
      text:'处理中',
      num:'5',
      col:'green',
      val:"processing",
      bgc:'#1f232c'
    },
    {
      text:'已解决',
      num:'8',
      col:'white',
      val:"resolved",
      bgc:'#1f232c'
    } 
  ])

  const init=()=>{
    data.value.forEach(stateItem=>{
      stateItem.num = db.filter(item=>item.state===stateItem.val).length
    })
  
  }
  
  onMounted(() => {
    init();
  })

  let currIndex = ref(0);
  
  const change=(val,idx)=>{
  
    currIndex.value = idx;
    emitter.emit('changeState',val);
  }

  </script>
  
  <style lang="scss">
  
  </style>